*,html{
    margin: 0;
    padding: 0;
}

/*
    修改自
    版权声明：本文为CSDN博主「little_shallot」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
    原文链接：https://blog.csdn.net/little_shallot/article/details/109425044
*/
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /*background-color: turquoise;*/
}

.box{
    list-style: none;
    width: 400px;
    height: 300px;
    overflow: auto;
    scroll-snap-type: y mandatory;
}

.box li{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: #333;
    scroll-snap-align: start;
}

.box li:last-child{
    margin-bottom: 120px;
}
.div {
    width: 400px;
    height: 300px;
    position: relative;
    background: linear-gradient(to bottom, rgba(117, 107, 128, 0.3) 0%, rgba(117, 107, 128, 0) 25%, rgba(117, 107, 128, 0) 75%, rgba(117, 107, 128, .3) 100%);
    box-shadow: inset 0px 0px 12px rgba(0, 0, 0, .2);
    border-radius: 12px;
}

/* 选择框 */
.div::after {
    content: '';
    position: absolute;
    top: 120px;
    width: 100%;
    height: 60px;
    background: linear-gradient(to bottom, rgba(117, 107, 128, 0.1) 0%, rgba(117, 107, 128, .2) 50%, rgba(117, 107, 128, .25) 50%, rgba(117, 107, 128, .1) 100%);
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
    border-top: 1px solid rgba(0, 0, 0, .12);
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

::-webkit-scrollbar {
  display: none;
}
/************分割线********************/
a {
    text-decoration: none;

}
a:hover,a:visited,a:active,a:link{
    color:lightblue;
}
.box{
    cursor: pointer;;
}
.box li:hover{
    animation:frameUrl 0.5s forwards;
}

@keyframes frameUrl {
    from{
        transform: scale(1.0,1.0);
    }
    to{
        font-weight: bolder;
        transform: scale(1.3,1.3);
    }
}